<template>
  <div class="container">
    <div id="map" ref="mapRef"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from "vue";
import chinaData from '@/assets/chinaNew.json'
import worldData from '@/assets/world.json'
import asiaData from '@/assets/asia.json'
// import chinaData from '@/assets/china-cities.json'
const mapRef = ref(null)
let chart = null
const draw = async () => {
  if (chart !== null && chart !== "" && chart !== undefined) {
    chart.dispose();
  }
  chart = echarts.init(mapRef.value)
  echarts.registerMap('china', worldData )
  chart.setOption(
    {
      series: [{
        name: '中国地图',
        type: 'map',
        map: 'china',
        roam: true,
        zoom: 1.2,
        nameProperty: 'name',

        itemStyle:{
          areaColor:"#ffffff",
          // borderColor:'blue'
        },
        emphasis:{
          disabled:true,//是否开启悬浮高亮
        },
        layoutCenter:['50%','50%'],
        layoutSize: 600,
        data: [
          { name: '北京', value: 1000 },
          { name: '上海', value: 2000 },
          { name: '安徽', value: 8000 },
        ],
        label: {
          show: true,
          fontSize: 8,
          // color: "red",
          // formatter: function (params) {
          //   const showCity = ['无锡']
          //   if(showCity.includes(params.name)){
          //     return params.name
          //   }else{
          //     return ''
          //   }
          // }
        }
      }],
      tooltip: {
        show: false,
      },
      toolbox: {
        show: false,
        orient: 'horizontal',
        left: 'right',
        feature: {
          dataView: { readOnly: false },
          restore: {},
          saveAsImage: {}
        }
      }
    }
  )
  window.addEventListener("resize", () => {
    if (chart) {
      chart.resize();
    }
  });
}

onMounted(() => {
  draw()
})
</script>

<style scoped lang="scss">
#map{
  width:1200px;
  height:800px;
}
</style>